import React, { useMemo} from 'react';
import {TouchableOpacity, Image, StyleSheet} from 'react-native';
import {BasicText} from '../../../kit/text';
import {SiginItem} from '../index';
import {useMakeMoneyContext} from '../index';
import { useTranslation } from 'react-i18next';
import { normalize } from '../../../utils/adapter';

type Props = {
  onPress: (item: SiginItem) => void;
  item: SiginItem;
};

const signed_in = require('../../../assets/images/signed_in.png');
const no_sign_in = require('../../../assets/images/no_sign_in.png');
const treasure_chest = require('../../../assets/images/treasure_chest.png');

const SignIn = function ({onPress, item}: Props): JSX.Element {
  const makeMoneyCtx = useMakeMoneyContext();
  const { t } = useTranslation();

  const isReceived = useMemo(() => {
    return makeMoneyCtx?.sigineds.includes(item);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [item, makeMoneyCtx?.sigineds.length]);

  return (
    <TouchableOpacity
      style={styles.signin_container}
      onPress={() => onPress(item)}>
      <Image
        style={styles.signin_image}
        source={
          isReceived
            ? signed_in
            : item.value === makeMoneyCtx?.siginList.length
            ? treasure_chest
            : no_sign_in
        }
      />
      <BasicText color={isReceived ? '#999999' : '#333333'} fontSize={12}>
        {isReceived ? t('alreadyFeceived') : item.value + t('day')}
      </BasicText>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  signin_container: {
    alignItems: 'center',
  },
  signin_image: {
    width: normalize(32),
    height: normalize(32),
    marginBottom: normalize(4),
  },
});

export default React.memo(SignIn);
